/*
    * @module:views/budget/compilationSummary/constructionCheck
    * @author:silas
    * @date:2021-01-28
    * 滚投结构审核
*/
<template>
  <div class="compilationSummary">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">滚投结构审核</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <el-form-item label="上报单位">
          <dx-cascader
            :area_id.sync="form.areaId"
            :area_name.sync="form.areaName"
            :area_lvl.sync="form.areaLvl"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker
            v-model="form.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="状态">
          <el-select v-model="form.status" clearable>
            <el-option
              v-for="(it, i) in status"
              :key="i"
              :label="it.label"
              :value="it.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="g-btn-wrapper">
            <div class="g-cell">
              <el-button
                size="small"
                style="margin-left: 12px"
                type="primary"
                @click="search"
                >查询</el-button
              >
            </div>
            <div class="g-btns">
              <el-button
                size="mini"
                type="orange"
                @click="handle_export()"
                >导出</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="tableBox">
        <el-table
          id="table1"
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          height="73vh"
          stripe
        >
          <el-table-column
            label="上报单位"
            width="120"
            prop="areaName"
           
          ></el-table-column>
          <el-table-column
            prop="version"
            label="上报版本"
            min-width="130"
          ></el-table-column>
          <el-table-column
            prop="reportUserName"
            label="上报人"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="reportUserName"
            label="上报人"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="上报时间"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="上报说明"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="auditUserName"
            label="审核人"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="auditTime"
            label="审核时间"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="auditExplain"
            label="审核说明"
            min-width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="statusLabel" label="状态" min-width="80">
           
          </el-table-column>
          <el-table-column label="操作" min-width="100" class-name="iconColor">
            <template slot-scope="scope">
             
              <el-button size="mini" type="text" @click="$router.push({
                      path: '/budget/constructionDetail',
                      query: { id: scope.row.id, type: 'check' },
                    })"
                >{{scope.row.status == 1 ? '查看' : '审核' }}</el-button
              >
              <!-- <el-tooltip
                class="item" 
                effect="dark"
                content="查看"
                placement="bottom"
              >
                <i
                  class="iconfont icon-chakan"
                  @click="
                    $router.push({
                      path: '/budget/seeGuide',
                      query: { targetId: scope.row.targetId },
                    })
                  "
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  :class="['iconfont', 'icon-bianji', 'is-disabled']"
                  v-if="scope.row.status == '1'"
                ></i>
                <i
                  :class="['iconfont', 'icon-bianji']"
                  v-else
                  @click="
                    $router.push({
                      path: '/budget/correctGuide',
                      query: { targetId: scope.row.targetId },
                    })
                  "
                ></i>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
     <div class="page">
        <el-pagination
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100]"
          @size-change="sizeChange"
          :page-size="form.pageSize"
          :total="dataTotal"
          :current-page.sync="form.pageNo"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
  </div>
</template>

<script>
// import tab3 from "@/views/budget/compilationSummary/compilationSummary-tab3";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "historyBudgeting",
  components: {
    // tab1,
    // tab2,
    // tab3,
  },
  data() {
    return {
      backRecord: false,
      form: {
        year: "",
        areaId: "",
        status: "",
        pageSize: 10,
        pageNo: 1,
      },
      dataTotal: 0,
      status: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "审核通过",
          value: 1,
        },
        {
          label: "审核失败",
          value: 2,
        },
      ],
      activeName: "first",
      accountInfo: "",
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      fileList: [],
      idList: [],
      importForm: {
        id: "",
        description: "",
      },
      rules: {
        id: [{ required: true, message: "请选择预算项", trigger: "blur" }],
        description: [
          { required: true, message: "请输入说明", trigger: "blur" },
        ],
      },
      param: "",
    };
  },
  computed: {
    // params() {
    //   let obj = {
    //     token: getCookie("token"),
    //     areaId: this.form.areaId,
    //     year: this.form.year,
    //     importFlag: this.form.resourceId,
    //     flag: this.flag,
    //   };
    //   return obj;
    // },
    areaSelect() {
      return this.form.areaSelect;
    },
  },
  created() {
    var that = this;

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.form.year = that.moment().format("YYYY");
    this.init();
  },
  // mounted() {
  //   this.init();
  // },
  methods: {
    //查询
    search() {
      var that = this,
          params = {
          testYear: that.form.year,
          areaId: that.form.areaId ? that.form.areaId : that.accountInfo.areaId,
            status: that.form.status,
            currentPage: that.form.pageNo,
            pageLength: that.form.pageSize,
      };
      this.listResourceData(params);
    },
    sizeChange(val) {
        var that = this;

        that.form.pageSize = val;
        var params = {
            testYear: that.form.year,
            areaId: that.form.areaId ? that.form.areaId : that.accountInfo.areaId,
            status: that.form.status,
            currentPage: that.form.pageNo,
            pageLength: that.form.pageSize,

        };
      that.listResourceData(params);
    },
    handleCurrentChange(val) {
        var that = this;

        that.form.pageNo = val;
        var params = {
            testYear: that.form.year,
            areaId: that.form.areaId ? that.form.areaId : that.accountInfo.areaId,
            status: that.form.status,
            currentPage: that.form.pageNo,
            pageLength: that.form.pageSize,
        };
        that.listResourceData(params);
    },
    errorUpload(err, file, fileList) {
      this.loading.close();
    },
    progress(event, file, fileList) {
      this.loading = this.$loading({
        lock: true,
        text: "正在导入",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    //导入成功的回调
    importTarget(response, file, fileList) {
      this.alertError(response);
      this.loading.close();
      if (response.code == 0) {
        this.$message({
          type: "success",
          message: "导入成功",
        });
        this.form.resourceId = true;
        this.getData(this.flag);
      }
    },
    // 模板下载
    template_download() {
      let token = getCookie("token");
      let year = this.form.year;
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          "/api/releaseReport/downLoadTemplate?testYear=" +
          year +
          "&token=" +
          token;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          "/api/releaseReport/downLoadTemplate?testYear=" +
          year +
          "&token=" +
          token;
      }
    },
    listResourceData(params) {
      var that = this ,
          status = ['待审核', '审核通过', '审核失败'];

      that.tableLoading = true;
      $budgetAPI.getConstructionCheck(params, (res) => {
        if (res.content.items.length) {
          res.content.items.map((it) => {
            it.createTime = it.createTime && it.createTime.substr(0, 10);
            it.auditTime = it.auditTime && it.auditTime.substr(0, 10);
            it.statusLabel = status[it.status]; 
          });
        }
        that.tableData = res.content.items;
        that.tableLoading = false;
      });
    },
    init() {
      let that = this,
        params = {
          testYear: that.form.year,
          areaId: that.form.areaId ? that.form.areaId : that.accountInfo.areaId,
          status: that.form.status,
          currentPage: that.form.pageNo,
          pageLength: that.form.pageSize,

        };
      that.listResourceData(params);
    },
    handleDetail(it) {
        this.$router.push({
            path: '/budget/constructionDetail',
            query: { id: it.id }
        });
    },
    handleDel(it) {
      var that = this;

      that.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((e) => {
          console.log(e);
          $budgetAPI.getDeleteReleaseRepor(
            {
              reportId: it.id,
            },
            (res) => {
              if (res.code == 0) {
                that.$message({
                  type: "success",
                  message: "删除成功",
                });
                var params = {
                  testYear: that.form.year,
                  areaId: that.form.areaId,
                  status: that.form.status,
                };
                that.listResourceData(params);
              }
            }
          );
        });
    },
    handle_export() {
        var xlsxParam = {
                raw: true
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, '滚投结构审核');
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            if(!this.tableData.length) {
              this.$message(
                {
                  type: "success",
                  message: "暂无内容可导",
                }
              )
                return
            }
            this.loading = this.$loading({
                lock: true,
                text: "正在导出",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"'
                    }),
                    '滚投结构审核.xlsx'
                );
                this.loading.close();
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
    }
  },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
  .formList {
    padding-bottom: 20px;
  }
  .g-btn-wrapper {
    display: flex;
    .g-cell {
      flex: 1;
      button {
        padding: 7px 15px;
      }
    }
    .g-btns {
      text-align: right;
    }
  }
  .table-content {
    .table-header {
      display: flex;
      justify-content: space-between;

      .btn-right {
        display: flex;
      }

      .table-title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;

        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #418ee9;
          border-radius: 1000%;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
    }
  }
}
</style>
<style lang="scss">